<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>会员分组</title>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
  <script src="../../js/li_ting/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="../../js/li_ting/bootstrap-3.3.5-dist/css/bootstrap.min.css" />
  <script src="../../js/li_ting/data.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #box {
      width: 100%;
      height: 100%;
    }

    #top {
      width: 80%;
      position: absolute;
      left: 10%;
      top: 5%;
    }

    #myTable {
      width: 80%;
      margin: auto;
      position: absolute;
      top: 25%;
      left: 10%;
    }

    th {
      height: 40px;
      background-color: #f4f4f4;
      position: relative;
      text-align: center;
      line-height: 40px;
    }

    td {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="top">
      <h4>会员分组（共三条）</h4>
      <hr />

      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addDiv">
        添加分组
      </button>
      <button type="button" class="btn btn-primary btn-lg" id="selectAll">
        全选
      </button>
      <button type="button" class="btn btn-primary btn-lg" id="delAll">
        删除
      </button>
      <div class="modal fade" tabindex="-1" role="dialog" id="addDiv">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">添加分组</h4>
            </div>
            <div class="modal-body">
              <span>*分组名称</span>
              <input type="text" id="addInput" />
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">
                取消
              </button>
              <button type="button" class="btn btn-primary" id="qdAdd">
                确定
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
    </div>
    <table id="myTable" class="table table-bordered">
      <thead>
        <th>分组名称</th>
        <th>目前等级人数</th>
        <th>操作</th>
      </thead>
      <tbody id="myBody"></tbody>
    </table>
  </div>
  <script>
    showTable(levelNameList);

    function showTable(data) {
      $("#myBody").html("");
      for (let i = 0; i < data.length; i++) {
        $("#myBody").append(`
                <tr>
                    <td>${data[i].hyName}</td>
                    <td>${data[i].nowPeople}</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick=delHuiYuan(${data[i].nameId})>删除</button>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alert1">编辑</button>

                        <div class="modal fade" tabindex="-1" role="dialog" id='alert1'>
                          <div class="modal-dialog" role="document">
                            <div class="modal-content">
                              <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">编辑分组</h4>
                              </div>
                              <div class="modal-body">
                                <span>*分组名称</span>
                                <input type='text' id='changeInput'>
                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" onclick=changeHuiYuan(${data[i].nameId})>确定</button>
                              </div>
                            </div><!-- /.modal-content -->
                          </div><!-- /.modal-dialog -->
                        </div><!-- /.modal -->
                    </td>
                </tr>
                `);
      }
    }

    function delHuiYuan(num) {
      console.log(levelNameList);
      for (let i = 0; i < levelNameList.length; i++) {
        if (levelNameList[i].nameId == num) {
          levelNameList.splice(i, 1);
          showTable(levelNameList);
        }
      }
    }

    //   添加分组名称
    $("#qdAdd").click(function () {
      let addName = String($("#addInput").val());
      let addID = parseInt(levelNameList.length);
      for (let i = 0; i < levelNameList.length; i++) {
        if (addName == levelNameList[i].hyName) {
          alert("分组名称已存在！请重新输入");
          $('#addInput').val('')
          return;
        }
      }
      $('#addDiv').modal('hide')
      let addObj = {
        nameId: addID,
        hyName: addName,
        nowPeople: 0
      }
      console.log(addObj);
      levelNameList.push(addObj);
      showTable(levelNameList);
    });
    // 全选
    $('#selectAll').click(function () {
      $('#myBody').css('backgroundColor', 'grey');
    })
    // 全删
    $('#delAll').click(function () {
      $('#myBody').html('');
    })
    // 编辑
    function changeHuiYuan(num) {
      console.log(num);
      $('#alert1').modal('hide');
      let changeInput = $('#changeInput').val();
      levelNameList[0].hyName = changeInput;
      showTable(levelNameList);
      return;
    }
  </script>
</body>

</html>